<template>
  <div :style="style1">中华人民共和国</div>
  <div :style="[style1,style2]">中华人民共和国</div>
  <div :style="{backgroundColor:'blue'}">中华人民共和国</div>
  <div :style="{'background-color':'blue'}">中华人民共和国</div>
  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
    <div class="blueColor">样式多值</div>
    <div class="redColor">样式多值</div>
  </div>
  <StyleViewSon class="redColor" />
  <span>样式加了scoped保证自身样式不会影响别人，但仍可能受外部样式影响</span>
</template>
<script setup lang="ts">
import StyleViewSon from './StyleViewSon.vue'
import { reactive } from 'vue'
const style1 = reactive({
  fontSize: '20px',
  color: 'red'
})
const style2 = reactive({
  fontWeight: 700
})
</script>
<style scoped>
.redColor{
  color:red;
}
</style>
